import React, { Component } from "react";
import styles from "./GoodList.module.scss";
import PageNav from "../PageNav";
import SearchInput from "../Search/SearchInput";
import { getProductList } from "../../utils/dataApi";
import { Toast } from "antd-mobile";

export default class GoodsList extends Component {
  state = {
    activeTab: "overall", // 综合 overall 销量 sale 价格 price
    goods: [], // 放产品信息
  };
  pagenum = 1;
  pagesize = 20;
  cid = "";
  query = "";
  total = 0;
  loading = false;

  handleTabClick = (e) => {
    let { active } = e.target.dataset;
    this.setState({
      activeTab: active,
    });
  };

  componentDidMount() {
    console.log(this.props);
    // 处理 从分类页面进来的情况 cid
    let arr = this.props.location.search.split("?")[1].split("=");
    if (arr[0] === "cid") {
      this.cid = arr[1];
    }
    if (arr[0] === "query") {
      this.query = arr[1];
    }

    // 处理首页跳转进来的情况 query
    this.getProductList();
    window.addEventListener("scroll", this.handleScroll);
  }
  
  // 当组件销毁的时候 取消scroll事件
  componentWillUnmount() {
    window.removeEventListener("scroll", this.handleScroll);
  }
  handleScroll = () => {
    let documentElement = document.documentElement;
    // 可以滚动距离
    let scrollHeight = documentElement.scrollHeight;

    // 窗口的高度
    let clientHeight = documentElement.clientHeight;

    // 已经滚动的距离
    let scrollTop = documentElement.scrollTop;

    if (scrollHeight - scrollTop - clientHeight < 1) {
      this.getProductList();
    }
  };
  // 点击列表项 跳转到详情页面
  handleItemClick = (goods_id) => {
    this.props.history.push("goodsDetail/" + goods_id);
  };

  /* 获取产品列表 */
  getProductList = async (params) => {
    // 三种情况不发请求：页码少于总的页码     total ===0      loading === true
    if (
      (this.pagenum <= Math.ceil(this.total / this.pagesize) || this.total === 0) &&
      this.loading === false
    ) {
      this.loading = true; //正在加载中
      params = params || {};
      if (this.cid) {
        params.cid = this.cid;
      }
      if (this.query) {
        params.query = decodeURIComponent(this.query); // 百分比解码
      }
      let res = await getProductList({
        ...params,
        pagenum: this.pagenum++,
        pagesize: this.pagesize,
      });
      this.loading = false; // 加载已经完成
      this.total = res.message.total || 0;
      console.log(this.total);
      // 设置state goods信息
      this.setState({
        goods: [...this.state.goods, ...res.message.goods],
      });
    } else {
      Toast.info("我的底线是有限度的。。。", 1);
    }
  };

  render() {
    return (
      <div>
        <PageNav title="商品列表" left={true}></PageNav>
        <SearchInput></SearchInput>

        {/* tabs 切换页面开始 */}
        <div className={styles.ykGoodList}>
          <div className={styles.goodListTabs} onClick={this.handleTabClick}>
            <div
              data-active="overall"
              className={
                this.state.activeTab === "overall"
                  ? styles.active + " " + styles.tabsItems
                  : styles.tabsItems
              }
            >
              综合
            </div>
            <div
              data-active="sale"
              className={
                this.state.activeTab === "sale"
                  ? styles.active + " " + styles.tabsItems
                  : styles.tabsItems
              }
            >
              销量
            </div>
            <div
              data-active="price"
              className={
                this.state.activeTab === "price"
                  ? styles.active + " " + styles.tabsItems
                  : styles.tabsItems
              }
            >
              价格
            </div>
          </div>

          {/* tab切换内容开始 */}
          <div className={styles.glTabsContent}>
            {this.state.activeTab === "overall" ? (
              <div className={styles.productList}>
                {this.state.goods.map((item) => {
                  return (
                    <div
                      key={item.goods_id}
                      onClick={this.handleItemClick.bind(this, item.goods_id)}
                      className={styles.listItem}
                    >
                      <div className={styles.listItemLeft}>
                        <img src={item.goods_small_logo} alt="" />
                      </div>

                      <div className={styles.listItemRight}>
                        <div className={styles.itemRightTop}>{item.goods_name}</div>
                        <div className={styles.itemRightBottom}>￥{item.goods_price}</div>
                      </div>
                    </div>
                  );
                })}
              </div>
            ) : (
              ""
            )}

            {this.state.activeTab === "sale" ? 1 : ""}
            {this.state.activeTab === "price" ? 2 : ""}
          </div>
          {/* tab切换内容结束 */}
        </div>
      </div>
    );
  }
}
